@use "../global.scss" as *;

$perspective: 60rem;
$font-size: 4.25rem;
$split-position: 49%;
$split-thickness: 4px;
$split-color: #62524C;//#FF2C75;

@font-face {
    font-family: 'Adieu';
    src: url('@/assets/fonts/adieu-regular.otf');
}

// #FF2C75
// === Settings =====
%font-settings {
    font-family: "Gilroy ExtraBold", system-ui, sans-serif;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-font-kerning: normal;
    -webkit-text-size-adjust: 100%;
}

// === Codepen Setup =====

// === Menu <ul> =====
.Menu-list {
    font-family: "Canela Light", serif;
    font-size: $font-size;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotateX(-10deg) rotateY(20deg); // overwritten by JS
}

// === Menu item =====
.Menu-list-item {
    position: relative;
    color: transparent;
    cursor: pointer;
    // === Split Line =====
    &::before {
        content: '';
        display: block;
        position: absolute;
        top: $split-position;
        left: -10%;
        right: -10%;
        height: $split-thickness;
        border-radius: $split-thickness;
        margin-top: -(calc($split-thickness / 2));
        background: $split-color;
        transform: scale(0);
        transition: transform .8s cubic-bezier(.16, 1.08, .38, .98);
        z-index: 1;
    }
    
    // === Top/bottom mask =====
    .Mask {
        display: block;
        position: absolute;
        overflow: hidden;
        color: $split-color;
        top: 0;
        height: $split-position;
        transition: all .8s cubic-bezier(.16, 1.08, .38, .98);
        
        span {
            display: block;
        }
    }
    
    // === Bottom mask specific =====
    .Mask:nth-child(2) {
        top: $split-position - 0.1;
        height: 100 - $split-position + 0.1;
        
        span {
            transform: translateY(-$split-position);
        }
    }
}

// === Where the fun stuff happens =====
.Menu-list-item:hover,
.Menu-list-item:active {
    .Mask {
        color: #FFF;
        transform: skewX(12deg) translateX(5px);
    }
    
    .Mask:nth-child(2) {
        transform: skewX(12deg) translateX(-5px);
    }
    
    &::before {
        transform: scale(1);
    }
}
